<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String imgPath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ "/img" + "/";
	String shop_id = request.getParameter("shop_id");
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<title>我要评价</title>

<script src="js/fontSize.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>

<script src="<%=basePath%>plugins/ajaxfileupload/ajaxfileupload.js"></script>

<link rel="stylesheet" href="<%=basePath%>plugins/layer/mobile/need/layer.css" />
<script src="<%=basePath%>plugins/layer/mobile/layer.js"></script>

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style2.css" />
<style>
body {
	background: #F5F5F6;
}

a, img {
	border: 0;
}

.file_head {
	cursor: pointer;
	display: block;
	height: 2.15rem;
	opacity: 0;
	position: absolute;
	width: 9%;
}
</style>
<script src="js/swiper.min.js"></script>

<script src="plugins/pinfen/js/jquery.raty.js" type="text/javascript"></script>
</head>

<body>
	<!--头部1-->
	<header class="header3 padding-lr1 background6">
		<p class="header3-left">
			<a href="###"><span class="ico bgico-7"
				style="background-image: url(images/img25.png)"></span></a>
		</p>
		<h2 class="header3-title text-align-center color1">我的寻宝</h2>
		<div class="header3-right">
			<figure class="dolamr">

				<div class="dolamr-zksq color1">
					<img src="images/img27.png">
					<figcaption>导航</figcaption>
				</div>

				<div class="dolamr-ajkf">
					<ul>
						<li><a href="<%=basePath%>index"> <span
								class="ico bgico-12"
								style="background-image: url(<%=basePath%>images/img38.png)"></span>
								<samp>首页</samp>
						</a></li>
						<li><a href="<%=basePath%>member/index"> <span
								class="ico bgico-12"
								style="background-image: url(<%=basePath%>images/img39.png)"></span>
								<samp>我的</samp></a></li>
						<%-- <li>
					<a href="javascript:void(0)">
					<span class="ico bgico-12" style="background-image: url(<%=basePath%>images/img40.png)"></span>
					<samp>分享</samp>
					</a>
				</li> --%>
					</ul>
				</div>
			</figure>
		</div>

		<div class="clear-both"></div>
	</header>
	<!--/头部1-->
	<div class="evaluate">
		<div class="evaluate-list">
			<p>环境</p>
			<div id="star1"></div>
			<div id="result1"></div>
			<!-- <img src="images/img32.png"> -->
		</div>
		<div class="evaluate-list">
			<p>服务</p>
			<div id="star2"></div>
			<div id="result2"></div>
			<!-- <img src="images/img32.png"> -->
		</div>
		<div class="evaluate-list">
			<p>口味</p>
			<div id="star3"></div>
			<div id="result3"></div>
			<!-- <img src="images/img32.png"> -->
		</div>
		<div class="evaluate-input">
			<input type="hidden" id="imgs">
			<textarea name="" id="content" placeholder="说说本次消费的亮点和不足吧！（歇够15字，才是好同志~）"></textarea>
			<div class="evaluate-img clearfix">
				<div style="float: left;" id="img_list">
					<!-- <img src="" id="preview" style="border-radius:50%;height:2.2rem;width:2.2rem;float:left;margin-right:0.4rem;margin-top:0.4rem;"> -->
				</div>
				<div class="evaluate-img-input fl">
					<input type="file" name="file" id="file_head" multiple="multiple" class="file_head" onchange="javascript:setImagePreview();" />
					<img src="images/input_img.png">
				</div>
				<div class="evaluate-img-info fr">
					<span>匿名评价</span> <input type="checkbox" name="" value="">
				</div>
			</div>
		</div>
	</div>
	<!--/底部1-->
	<button class="evaluate-release" onclick="comment()">我要发布</button>
	<script src="js/style.js"></script>
	<script type="text/javascript">
	$(function(){
		rat('star1','result1',1);
		rat('star2','result2',1);
		rat('star3','result3',1);
	});
	function rat(star,result,m){
		var scoreName = star;
		star= '#' + star;
		result= '#' + result;
		$(result).hide();//将结果DIV隐藏

		$(star).raty({
			hints: ['1','2', '3', '4', '5'],
			path: "plugins/pinfen/css/img",
			starOff: 'star-off-big.png',
			starOn: 'star-on-big.png',
			size: 24,
			number:6,
			start: 40,
			showHalf: true,
			scoreName:scoreName,
			target: result,
			targetKeep : true,//targetKeep 属性设置为true，用户的选择值才会被保持在目标DIV中，否则只是鼠标悬停时有值，而鼠标离开后这个值就会消失
			click: function (score, evt) {
				//第一种方式：直接取值
				// alert($(this).attr("id"));raty_
				// alert('你的评分是'+score*m+'分');
			}
		});

		/*第二种方式可以设置一个隐蔽的HTML元素来保存用户的选择值，然后可以在脚本里面通过jQuery选中这个元素来处理该值。 弹出结果
		var text = $(result).text();
		$('img').click(function () {
			if ($(result).text() != text) {
				alert('你的评分是'+$(result).text()/m+'分');
				alert(result);
				return;
			}
		});*/
	}
	  
	function setImagePreview() {
		var preview, img_txt, localImag, file_head = document.getElementById("file_head"), picture = file_head.value;
		if (!picture.match(/.jpg|.gif|.png|.bmp|.JPEG/i))
			return layer.open({content : "您上传的图片格式不正确，请重新选择！",skin : 'msg',time : 2}), !1;
		if (file_head.files && file_head.files[0] && $("#img_list>img").size() < 5) {
			var len = file_head.files.length;
			if (file_head.files.length > 5) {
				len = 5
			}
			var imgs = $("#imgs").val();
			for (var i = 0; i < len; i++) {
				preview = document.createElement("img");
				preview.style.display = "block",
				preview.style.width = "2.2rem",
				preview.style.height = "2.2rem",
				preview.style.float = "left";
				preview.style.marginRight = "5px";
				preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[i]) : window.URL.createObjectURL(file_head.files[i]);
				$("#img_list").append(preview);
				if (null != imgs && imgs != "") {
					imgs += ",";
				}
				imgs += preview.src;
			}
			$("#imgs").val(imgs);
		}
	}

	function comment() {
		var environment = $("#raty_star1").val();
		var service_star = $("#raty_star2").val();
		var taste = $("#raty_star3").val();
		var shop_id = "<%=shop_id%>";
		var content = $("#content").val();
		if (environment == "") {
			layer.open({
				content : "请给环境打个分",
				skin : 'msg',
				time : 2 //2秒后自动关闭
			});
			return;
		}
		if (service_star == "") {
			layer.open({
				content : "请给服务打个分",
				skin : 'msg',
				time : 2 //2秒后自动关闭
			});
			return;
		}
		if (taste == "") {
			layer.open({
				content : "请给口味打个分",
				skin : 'msg',
				time : 2 //2秒后自动关闭
			});
			return;
		}
		if (null == content || content == "") {
			layer.open({
				content : "请填写评论内容",
				skin : 'msg',
				time : 2 //2秒后自动关闭
			});
			return;
		}
		if (null == shop_id || shop_id == "") {
			layer.open({
				content : "要评论的店铺不存在",
				skin : 'msg',
				time : 2 //2秒后自动关闭
			});
			return;
		}
		var imgs = $("#imgs").val();
		
		var data = new FormData();
		$.each($('#file_head')[0].files, function(i, file) {
			data.append('upload_file', file);
		});
		data.append('content', content);
		data.append('service_star', service_star);
		data.append('environment', environment);
		data.append('taste', taste);
		data.append('shop_id', shop_id);
		var li = layer.open({
			type: 2,
			content: '正在提交评论'
		});
		var ctx = "${pageContext.request.contextPath}";
		$.ajax({
            url:ctx+'/comment',//上传后台路径
            data:data,
            type:"POST",
            cache: false,
            contentType: false,        //不可缺参数
            processData: false,        //不可缺参数
            success:function(msg){
            	layer.close(li);
            	layer.open({
					content: msg.msg,
					skin: 'msg',
					time: 2 //2秒后自动关闭
				});
            	if (msg.code == -1) {
            		window.location.href = ctx+"/again_login.jsp?page=/shop_comment.jsp?shop_id="+shop_id;
            	} else if(msg.code == 1) {
            		window.location.href = ctx+"/shop/"+shop_id+"#1";
            	}
            }
        })
	}
	</script>
</body>
</html>